<template>
    <div class="mv-detail">
      <div class="top">
        <!-- autoplay自动播放  controls播放控制栏  loop重复播放-->
        <video class="video" autoplay controls loop  :src="getUrl(obj.video)"></video>
        <div class="top-b">
            <p>{{obj.author}} - {{ obj.name }}</p>
            <IconPark class="icon-like"  size="25" 
            :class="mvLikes.indexOf(obj.mvId) !== -1 ? 'like' : ''" 
            :icon="Like" 
            :theme="mvLikes.indexOf(obj.mvId) !== -1 ? 'filled' : 'outline'"  
            @click="MusicList(3, obj.mvId)" />
        </div>
      </div>
      <div class="bottom"></div>
    </div>
  </template>
  <script setup lang="ts">  
  import { useRoute } from 'vue-router';
  import { Like } from '@icon-park/vue-next';
  import IconPark from '@/components/common/IconPark.vue';
  import { useUserStore } from '@/store/user';
  import { getUrl } from '@/utils/format';
  import { mvDetail } from "@/api";
  import { storeToRefs } from 'pinia';
  import { ref } from "vue";
  const { MusicList } = useUserStore();
  let route = useRoute()
  const { mvLikes } = storeToRefs(useUserStore());
  
  console.log(route.params);
  let obj = ref({})
  getDetail()
  function getDetail(){
    mvDetail(Number(route.params.id)).then(res=>{
      obj.value = res
    })
  }
  </script>
  <style lang="less" scoped>
  .mv-detail{

  }
  .like{
    color: red !important;
  }
  .icon-like{
    cursor: pointer;
  }
  .video{
    width: 100%;
  }
  .top{    
    width: 100%;
    padding-bottom: 10px;
    background-color: rgba(50, 52, 61, .61);
    .top-b{
      display: flex;
      justify-content: space-between;
      align-items: center;
      .icon-like{
        margin-right: 20px;
        color: #fff;
      }
      p{
        color: #fff;
        font-weight: 500;
        font-size: 25px;
        margin-left: 15px;

      }
    }
   
  }
  .bottom{

  }
</style>